<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分店信息</title>
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="3">
            <el-input v-model="searchForm.empName" placeholder="请输入分店名字"  size="mini"></el-input>
        </el-col><!--
        <el-col :span="2">
            <el-radio-group v-model="searchForm.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
            </el-radio-group>-->
        </el-col>
        <el-col :span="3">
            <el-input v-model="searchForm.age" placeholder="请输入分店名称"  size="mini"></el-input>
        </el-col>
        <el-col :span="3">
            <el-input v-model="searchForm.address" placeholder="请输入分店地址"  size="mini"></el-input>
        </el-col>
        <el-col :span="3">
            <el-select v-model="searchForm.status" placeholder="请选择分店状态" size="mini">
                <el-option label="营业" value="1"></el-option>
                <el-option label="休息" value="2"></el-option>
            </el-select>
        </el-col>
        <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
            <el-button type="primary" icon="el-icon-circle-plus" size="mini" @click="handlerAdd">添加</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="refresh">刷新</el-button>
        </el-col>

        <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="2"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <!--表格数据  : 相当于v-bind: -->
    <el-table
            :data="tableData"
            style="width: 100%">
        <!--表格的列   prop 组件   父作用域向子作用域传值-->
        <el-table-column
                prop="storesId"
                label="分店Id"
                width="80">
        </el-table-column>
        <el-table-column
                prop="storesName"
                label="分店名称"
                width="80">
        </el-table-column>
        <el-table-column
                prop="storesAddress"
                label="分店地址"
                width="150">
        </el-table-column>
        <el-table-column
                prop="headName"
                label="店长名字"
                width="100">
        </el-table-column>
        <el-table-column
                prop="headPhone"
                label="店长联系方式"
                width="140">
        </el-table-column>
        <el-table-column
                prop="empNum"
                label="员工数量"
                width="80">
        </el-table-column>
        <el-table-column
                prop="startDate"
                label="开店日期"
                width="140">
        </el-table-column>
        <el-table-column
                prop="status"
                :formatter="getStatus"
                label="状态"
                width="60">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2,3,5,10,15,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--部门添加/更新对话框-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="分店名称" prop="storesName" :label-width="formLabelWidth">
                <el-input v-model="form.storesName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="分店地址" prop="storesAddress" :label-width="formLabelWidth">
                <el-input v-model="form.storesAddress" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="店长名字"  prop="headName" :label-width="formLabelWidth">
                <el-input v-model="form.headName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="店长联系方式"  prop="headPhone" :label-width="formLabelWidth">
                <el-input v-model="form.headPhone" autocomplete="off"></el-input>
            </el-form-item>
            <!--<el-form-item label="员工数量"  prop="empNum" :label-width="formLabelWidth">
                <el-input v-model="form.empNum" autocomplete="off"></el-input>
            </el-form-item>-->
            <el-form-item label="开店日期"  prop="startDate" :label-width="formLabelWidth">
                <el-input v-model="form.startDate" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="营业状态" prop="status" :label-width="formLabelWidth">
                <el-select v-model="form.status" placeholder="请选择营业状态">
                    <el-option label="营业" value="1"></el-option>
                    <el-option label="休息" value="2"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>
</div>
<!--引入vue-->
<script src="/js/vue.js"></script>
<!-- 引入组件element-ui库 -->
<script src="/js/index.js"></script>
<!--引入axios库-->
<script src="/js/axios.min.js"></script>

<script>
    var app =new Vue({
        el:"#app",
        /* data:{

         }*/
        data:function () {
            return{
                tableData: [],
                currentPage:1,
                pageSize: 2,
                total:100,
                searchForm:{storesName:'',storesAddress:'',headName:'',headPhone:'',startDate:'',status:''},
                title:"添加员工",
                dialogFormVisible: false, //是否显示对话框  默认是不显示
                form:{storesName:'',storesAddress:'',headName:'',headPhone:'',startDate:'',status:'1'},//form表单对象
                formLabelWidth: '120px',
                rules: {
                    storesName: [
                        { required: true, message: '请输入分店名字', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ] ,
                    storesAddress:[
                        { required: true, message: '请输入分店地址', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ],
                    headName:[
                        { required: true, message: '姓名不能为空',trigger: 'blur'},
                        { required: true, message: '请输入店长名字', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ],
                    headPhone:[
                        { required: true, message: '请输入店长联系方式', trigger: 'blur' },
                        { min: 1, max: 11, message: '长度在 1 到 11 个字符', trigger: 'blur' }
                    ],
                    /*empNum: [
                        { required: true, message: '请输入员工人数', trigger: 'blur' },
                        { min: 1, max: 3, message: '长度在1~3个字符', trigger: 'blur' }
                    ],*/
                    status: [
                        { required: true, message: '请选择员工状态', trigger: 'change' }
                    ]
                }
            }
        },
        created:function () { //初始化方法 类似于jquery  $({})
            this.loadData();
        },
        methods:{
            loadData(){
                //让_this等于当前vue对象
                var _this = this;
                //赋值 axios官网代码
                axios.post('/stores/listAll',{pageNum:this.currentPage,pageSize:this.pageSize,data:this.searchForm})  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        // handle success
                        console.log(response);
                        //JSON.stringify   把json转换为json字符串，方便查看
                        console.log(JSON.stringify(response));
                        //直接使用this 会指 axios对象  错误
                        // this.tableData
                        //判断返回值是否正确
                        if(response.data.code==200){
                            _this.tableData = response.data.data.list;
                            _this.total = response.data.data.total;
                        }

                    })
                    .catch(function (error) {//错误的处理
                        // handle error
                        console.log(error);
                    })
                    .then(function () {//总执行 最终处理      类似java  异常处理的finally
                        // always executed
                    });
            },
            refresh(){
                location.reload();
            },
            //每页数量发生变化执行方法
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                //再次请求，加载数据
                this.loadData();
            },
            //当前页发生变化时执行方法
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);

                this.currentPage =val;
                //再次请求，加载数据
                this.loadData();
            },
            //获取员工状态  把状态数字，转换为字符
            getStatus(row, column, cellValue, index){
                return cellValue==1?"营业":"休息";
            },
            search(){
                this.loadData();
            },
            //处理添加
            handlerAdd(){
                //显示对话框
                this.dialogFormVisible=true;
                //指定对话框标题
                this.title = '添加员工';
                //让form表单重新赋空值
                this.form={};
            },
            //处理更新
            handleEdit(index, row) {
                //row  当前行数据 如果是第一行  row = {deptId:1,deptName:'管理部',description:'店长的事',status:1}
                console.log(index, row);
                //显示对话框
                this.dialogFormVisible=true;
                //指定对话框标题
                this.title = '修改员工信息';
                //把一行数据赋值给form赋值
                this.form = row;
                //把数字1变为字符串1
                this.form.status = row.status+'';
            },
            //处理删除
            handleDelete(index, row) {
                console.log(index, row);
                //确认框提示
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    //让_this等于当前vue对象
                    var _this = this;
                    alert("已删除此条信息");
                    //赋值 axios官网代码  this.form =form:{deptName:'',description:'',status:1}
                    axios.delete("/stores/delete?storesId="+row.storesId)  //指定请求的url及参数  get
                        .then(function (response) {  //正确返回对象的处理
                            // handle success
                            console.log(response);
                            //JSON.stringify   把json转换为json字符串，方便查看
                            console.log(JSON.stringify(response));
                            //直接使用this 会指 axios对象  错误
                            // this.tableData
                            //判断返回值是否正确
                            if(response.data.code==200){
                                //提示添加成功
                                _this.$message({
                                    message: '恭喜你，这是一条成功消息',
                                    type: 'success'
                                });
                                //重新加载数据
                                _this.loadData();
                            }else {
                                //错误提示信息
                                _this.$message.error('错了哦，这是一条错误消息');
                            }

                        })
                        .catch(function (error) {//错误的处理
                            // handle error
                            console.log(error);
                        })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //提交表单
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var  url  = "";
                        if(this.title=='添加员工'){
                            url='/stores/insert';
                        }else{
                            url='/stores/update';
                        }
                        //让_this等于当前vue对象
                        var _this = this;
                        // alert(111);
                        //赋值 axios官网代码  this.form =form:{deptName:'',description:'',status:1}
                        axios.post(url,this.form)  //指定请求的url及参数  get
                            .then(function (response) {  //正确返回对象的处理
                                // handle success
                                console.log(response);
                                //JSON.stringify   把json转换为json字符串，方便查看
                                console.log(JSON.stringify(response));
                                //直接使用this 会指 axios对象  错误
                                // this.tableData
                                //判断返回值是否正确
                                if(response.data.code==200){
                                    //关闭弹框
                                    _this.dialogFormVisible=false;
                                    //提示添加成功
                                    _this.$message({
                                        message: '恭喜你，这是一条成功消息',
                                        type: 'success'
                                    });
                                    //重新加载数据
                                    _this.loadData();
                                }else {
                                    //错误提示信息
                                    _this.$message.error('错了哦，这是一条错误消息');
                                }

                            })
                            .catch(function (error) {//错误的处理
                                // handle error
                                console.log(error);
                            })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    })
</script>
</body>
</html>